import React from 'react';
import {
  Tabs,
  Select,
  Card,
  Space,
  Input,
  Button,
  Col,
  Row,
  Cascader,
  List,
} from 'antd';
import styles from './index.less';
import themeArr from '../../../config/themeMap';

import avatar from '../../assets/logo.svg';

const { TabPane } = Tabs;
const { Option } = Select;
const { TextArea } = Input;

class center extends React.Component {
  state = {
    tabPosition: 'left',

    listData: [
      {
        title: '账户密码',
        content: '当前密码强度：强',
        action: '修改',
      },
      {
        title: '密保手机',
        content: '已绑定手机:138****8293',
        action: '修改',
      },
      {
        title: '密保问题',
        content: '未设置密保问题，密保问题可有效保护账户安全',
        action: '设置',
      },
      {
        title: '备注邮箱',
        content: '已绑定邮箱:ant***sign.com',
        action: '修改',
      },
      {
        title: 'MFA 设备',
        content: '未绑定 MFA 设备,绑定后，可以进行二次确认',
        action: '绑定',
      },
    ],
    menuMode: 'inline',
  };

  changeTheme = (key) => {
    const index = themeArr.findIndex((element) => element.name === key);
    document.head
      .querySelector('#theme')
      .setAttribute('href', `./${themeArr[index].name}.css`);
  };

  changeMenuMode = () => {
    const theme = JSON.parse(window.sessionStorage.getItem('theme'));
    let menuMode = 'inline';
    if (theme) {
      if (theme.menuMode == 'inline') {
        menuMode = 'vertical';
      }
      var themeParam = {
        menuMode: menuMode,
      };
      window.sessionStorage.setItem('theme', JSON.stringify(themeParam));
    } else {
      var themeParam = {
        menuMode: 'inline',
      };
      window.sessionStorage.setItem('theme', JSON.stringify(themeParam));
    }
    this.setState({
      menuMode: menuMode,
    });
  };

  render() {
    return (
      <div style={{ paddingTop: 10 }}>
        <Card>
          <Tabs
            tabPosition={this.state.tabPosition}
            tabBarStyle={{ width: 200 }}
          >
            <TabPane tab="主题设置" key="1">
              <div className={styles.theme}>
                <Row gutter={16}>
                  <Col span={12}>
                    <Card title="mytheme主题" bordered={false}>
                      <div className={styles.title}>
                        <Button
                          type="primary"
                          onClick={() => {
                            this.changeTheme('mytheme');
                          }}
                        >
                          改变颜色
                        </Button>
                      </div>
                    </Card>
                  </Col>
                  <Col span={12}>
                    <Card title="theme2主题" bordered={false}>
                      <div className={styles.footer}>
                        <Button
                          type="primary"
                          onClick={() => {
                            this.changeTheme('theme2');
                          }}
                        >
                          改变颜色
                        </Button>
                      </div>
                    </Card>
                  </Col>
                </Row>
              </div>
            </TabPane>
            <TabPane tab="布局设置" key="2" style={{ paddingRight: 20 }}>
              <h1 style={{ fontSize: '20px' }}> 布局设置</h1>
              <List
                dataSource={this.state.listData}
                renderItem={(item) => (
                  <List.Item actions={[<a>{item.action}</a>]}>
                    <List.Item.Meta
                      title={item.title}
                      description={item.content}
                    ></List.Item.Meta>
                  </List.Item>
                )}
              />
            </TabPane>
            <TabPane tab="菜单布局" key="3" style={{ paddingRight: 20 }}>
              <h1 style={{ fontSize: '20px' }}> 菜单布局</h1>
              <Row gutter={16}>
                <Col span={12}>
                  <Space>
                    <span>当前菜单样式:</span>
                    <span className={styles.fontColor}>
                      {this.state.menuMode}
                    </span>
                  </Space>
                </Col>
                <Col span={12}>
                  <Button
                    type="primary"
                    onClick={() => {
                      this.changeMenuMode();
                    }}
                  >
                    改变菜单展示类型
                  </Button>
                </Col>
              </Row>
            </TabPane>
          </Tabs>
        </Card>
      </div>
    );
  }
}
export default center;
